<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010608滕旋州</title>
    <link rel="stylesheet" href="./login.css">
    <link rel="stylesheet" href="./tengxuanzhou.css">
    <style>
        
    </style>
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div id="beijing">
        <div id="txzdenglukuang">
            <div id="txzhupu">
                <img src="./img/logo.webp" style="margin: 20px;padding:4px 11px;" alt="">
                <form action="./my.html">
                    <div id="txzzhanghao">
                        <span class="iconfont icon-yonghu" style="color:#ff0000;font-size: 22px;font-weight: bold;"></span>
                        <input placeholder="账号" type="text" style="width: 380px ;height: 30px;border: none;">
                    </div>
                    <div id="txzmima">
                        <span class="iconfont icon-icon_password" style="color: rgb(7, 118, 98);font-size: 22px;"></span>
                        <input placeholder="密码" type="text" style="width: 380px ;height: 30px;border: none;">
                    </div>
                    <div id="txzyanzhengma">
                        <span class="iconfont icon-yanzhengyanzhengma" style="color: blue;font-size: 22px;"></span>
                        <button style="width: 100%; height: 100%;background-color: rgb(255, 255, 255);border: none;color: #000000;font-weight: 700;">点击按钮开始智能验证</button>
                    </div>
                    <div id="txzxieyi">
                        <input type="checkbox">
                        <span>我已阅读并同意</span><a href="#" style="text-decoration:  none;">《用户协议》</a><span>及</span><a href="#" style="text-decoration: none;">《隐私条款》</a>
                    </div>
                    <div id="txzdenglu">
                        <button style="width: 380px ;height: 46px;border-radius: 5px; font-weight:bold; border: none;background-color: #ff0000;color: #ffffff;">登录</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 以下为JSON与JavaScript示例 -->
    <script>
        // 定义一个JSON配置对象，可用于控制样式、文本等
        const config = {
            "bgColor": "#f9f9f9",
            "logoUrl": "./img/logo.webp",
            "validationMessage": "请输入正确的账号和密码后再试。",
            "submitEnabled": true
        };

        document.addEventListener("DOMContentLoaded", () => {
            // 根据config动态修改背景颜色
            const loginBox = document.getElementById("txzdenglukuang");
            loginBox.style.backgroundColor = config.bgColor;

            // 修改Logo
            const logoImg = document.querySelector("#txzhupu img");
            if (logoImg && config.logoUrl) {
                logoImg.src = config.logoUrl;
            }

            // 为表单添加提交事件监听，对账号和密码进行简单校验
            const form = document.querySelector("form");
            form.addEventListener("submit", (event) => {
                const usernameInput = form.querySelector('input[placeholder="账号"]');
                const passwordInput = form.querySelector('input[placeholder="密码"]');

                // 简单验证：账号和密码不能为空
                if (!usernameInput.value.trim() || !passwordInput.value.trim()) {
                    event.preventDefault();
                    alert(config.validationMessage);
                }
            });

            // 如果根据配置需要禁用提交按钮
            if (!config.submitEnabled) {
                const submitButton = form.querySelector('button[type="submit"]');
                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.style.backgroundColor = "#ccc";
                    submitButton.style.cursor = "not-allowed";
                }
            }
        });
    </script>
</body>
</html>
